<template>
  <div class="henan-con" ref="dom">
    <div style="height: 100%;" ref="map"></div>
    <div class="rise-box">
      <div class="rise">
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="../all-count/tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(current.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="../all-count/fall.png" alt="" v-if="!fallOrRise(current.yearOnYearRate)" class="ani-down">
            <img src="../all-count/rise.png" alt="" v-if="fallOrRise(current.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="../all-count/huanbi.png">
          </p>
          <p>
            <span class="num">{{formatNum(current.ringRatioRate)}}</span>
            <span>%</span>
            <img src="../all-count/fall.png" alt="" v-if="!fallOrRise(current.ringRatioRate)" class="ani-down">
            <img src="../all-count/rise.png" alt="" v-if="fallOrRise(current.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="city">{{current.name}}（{{current.value}}家）</div>
    </div>
    <div class="total">
      <div class="rise">
        <div class="middle">
          <p>
            <span>同比增长</span>
            <img src="../all-count/tongbi.png" alt="">
          </p>
          <p>
            <span class="num">{{formatNum(henan.yearOnYearRate)}}</span>
            <span>%</span>
            <img src="../all-count/fall.png" alt="" v-if="!fallOrRise(henan.yearOnYearRate)" class="ani-down">
            <img src="../all-count/rise.png" alt="" v-if="fallOrRise(henan.yearOnYearRate)" class="ani-up">
          </p>
        </div>
        <div class="middle">
          <p>
            <span>环比增长</span>
            <img src="../all-count/huanbi.png">
          </p>
          <p>
            <span class="num">{{formatNum(henan.ringRatioRate)}}</span>
            <span>%</span>
            <img src="../all-count/fall.png" alt="" v-if="!fallOrRise(henan.ringRatioRate)" class="ani-down">
            <img src="../all-count/rise.png" alt="" v-if="fallOrRise(henan.ringRatioRate)" class="ani-up">
          </p>
        </div>
      </div>
      <div class="city">河南省（{{henan.currentTotal}}家）</div>
    </div>
    <div class="top">
      <div class="item">用人单位所在地域TOP10（家）</div>
      <div class="item" v-for="(val, key) in top10" :key="key">
        <span class="label">{{val.name}}</span>
        <span class="text">{{val.cnt}}</span>
      </div>
      <div class="item">
        <span class="label">总计</span>
        <span class="text">{{total}}</span>
      </div>
    </div>
    <div class="title">用人单位所在地域</div>
  </div>
</template>
<script>
import echarts from 'echarts'
import {AutoHighLight} from '../../common/js/utils'
import henan from '../map-user/henan'
import {fallRise} from '../../common/js/mixin'
import {mapGetters} from 'vuex'
import {INTERVAL} from '../../common/js/config'

export default {
  name: 'map-corp',
  mixins: [fallRise],
  computed: {
    ...mapGetters([
      'currentTime'
    ])
  },
  data() {
    return {
      current: {
        ringRatioRate: '',
        yearOnYearRate: '',
        name: '',
        value: ''
      },
      options: {
        title: {
          show: false,
          text: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter(params) {
            return `${params.name}<br>${params.value}家`
          }
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
        series: [{
          type: 'map',
          mapType: 'henan',
          center: [113.665412, 34.057999],
          zoom: 0.95,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#389BB7',
              areaColor: '#18578a'
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          },
          animation: false,
          data: []
        }]
      },
      top10: [],
      total: 0,
      henan: {
        currentTotal: '',
        ringRatioRate: '',
        yearOnYearRate: ''
      }
    }
  },
  methods: {
    renderMap() {
      echarts.registerMap('henan', henan)
      this.chart = echarts.init(this.$refs.map)
      this.chart.setOption(this.options)
      this.auto = new AutoHighLight({
        e: this.chart,
        enlarge: true,
        appendDom: this.$refs.dom,
        cb: d => {
          this.current = d
        }
      })
    },
    getData() {
      this.$post('/service/business/statistic/statistic/getCorpTop', {
        beginDate: this.currentTime.start,
        endDate: this.currentTime.end
      }).then(res => {
        this.henan.currentTotal = res.result.currentTotal
        this.henan.ringRatioRate = res.result.ringRatioRate
        this.henan.yearOnYearRate = res.result.yearOnYearRate
        this.top10 = res.result.getCorpTop10
        this.total = 0
        this.top10.forEach(item => { this.total += item.cnt })
        this.chart.setOption({
          visualMap: [
            {
              show: false,
              range: [0, Math.max.apply(null, res.result.getCorp.map(item => item.cnt))],
              min: 0,
              max: Math.max.apply(null, res.result.getCorp.map(item => item.cnt)),
              inRange: {
                color: ['#18578a', 'red'],
                symbolSize: [0, Math.max.apply(null, res.result.getCorp.map(item => item.cnt))]
              }
            }
          ],
          series: [{
            data: res.result.getCorp.map(item => {
              return {
                name: item.name,
                value: item.cnt,
                yearOnYearRate: item.yearOnYearRate,
                ringRatioRate: item.ringRatioRate
              }
            })
          }]
        })
      })
    },
    start() {
      clearInterval(this.timer)
      this.getData()
      if (this.currentTime.end === this.$dateFormat(new Date(), 'yyyy-MM-dd')) {
        this.timer = setInterval(() => {
          this.getData()
        }, INTERVAL)
      }
    }
  },
  created() {
    this.start()
    this.$watch('currentTime', () => {
      setTimeout(() => {
        this.start()
      }, 20)
    })
  },
  mounted() {
    this.renderMap()
  }
}
</script>
<style scoped lang="scss">
  @import "../../common/style/mapHenan";
</style>
